<template>
  <div>
    <div>
      <el-form :inline="true" >
        <el-form-item>
          <el-button type="primary" size="medium" @click="goto('')"><i class="iconfont icon-plus"></i>添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="mytable">
      <el-table
        :data="mainList"
        stripe
      >
        <el-table-column
          label="id"
          width="50">
          <template slot-scope="scope">
            {{ scope.row.member_id }}
          </template>
        </el-table-column>
        <el-table-column
          label="套餐名称"
         >
          <template slot-scope="scope">
            {{ scope.row.member_name }}
          </template>
        </el-table-column>
        <el-table-column
          label="会员折扣(%)"
        >
          <template slot-scope="scope">
            {{ scope.row.discount }}
          </template>
        </el-table-column>
        <el-table-column
          label="会员套餐(元)"
        >
          <template slot-scope="scope">
            {{ scope.row.price | yuanToFen }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="goto(scope.row)"><i class="iconfont icon-edit"></i>编辑</el-button>
            <!-- <el-button type="text" @click="del(scope.row)"><i class="iconfont icon-del"></i>删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination
        class="pagecon"
        background
        layout="total, sizes, prev, pager, next"
        @current-change="_mainList"
        @size-change="_mainList"
        :page-size.sync="page.limit"
        :page-sizes="pageSizeArr"
        :current-page.sync="page.page"
        :total="page.total">
      </el-pagination> -->
    </div>

    <!-- // 添加编辑 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="标签名称"  prop="lable_name">
          <el-input placeholder="请输入" v-model="form.lable_name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="doAction">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import memberComboAPI from 'api/memberManagement/memberComboAPI';
// import config from 'api/config'
import { pageSizeArr } from 'common/config/constConfig'

export default {
  computed: {
    dialogTitle(){
      if(this.dialogMode === 'add'){
        return '添加标签'
      }else{
        return '编辑标签'
      }
    }
  },
  data() {
    return {
      dialogMode: 'add',
      dialogFormVisible: false,
      form: {},
      pageSizeArr,
      queryObj: {},
      rules: {
        lable_name: [
          { required: true, message: '请输入标签名', trigger: 'blur' }
        ]
      },
      mainList: [],
      page: {
        total: 0,
        page: 1,
        limit: 10
      }
    }
  },
  methods: {
    goto(row) {
      let data = {path: '/home/memberComboDetail'}
      if(row) {
        data.query = {
          id: row.member_id,
          ...row
        }
      }
      this.$router.push(data)
      // this.form = {}
      // this.dialogMode = 'add'
      // this.dialogFormVisible = true
      // if(row) {
      //   this.form = {...row}
      //   this.dialogMode = 'edit'
      // }
    },
    doAction() {
      // let data = {...this.form}
      // addOrModifyLable(data).then(() => {
      //   this._caozuoAfter('操作成功')
      // })
    },
    del(row){
      this.$confirm('是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this._del(row)
      })
    },
    _del(row){
      memberComboAPI('deleteMemberConfig', {member_id: row.member_id}).then(res => {
        this._caozuoAfter(res.rMsg)
      })
    },
    _caozuoAfter(msg){
      this.dialogFormVisible = false
      this.$message({
        message: msg,
        type: 'success'
      })
      this._mainList()
    },
    getMainListReset(){
      this.page.page = 1
      this._mainList()
    },
    // 获取
    _mainList(){
      let data = {...this.queryObj}
      // data.pageInfo = {...this.page}
      memberComboAPI('getMemberConfigAllList', data).then(res => {
        // let pageInfo = res.pageInfo
        // this.page.total = pageInfo.Total
        // this.page.page = pageInfo.page
        this.mainList = res.rData
      })
    },
  },
  created(){
    this._mainList()
  }
}
</script>

<style lang="scss" scoped>
.icon-arrowsupline, .icon-arrowsdownline{
  cursor: pointer;
}
.categoryimg{
  height: 80px;
}
.c999{
  color: #999;
}
.bigicon{
  font-size: 22px;
  font-weight: bold;
}
.blue{
  color: #409EFF;
}

</style>
